<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>员工列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <!-- 查询条件 -->
        <el-row class="table-selbox" v-if="btnSel">
          <!-- 查询条件表单 -->
          <el-form :inline="true" :model="formInline">
            <el-form-item label="签约主体">
              <el-select
                  v-model="formInline.signCompany"
                  auto-complete="off"
                  placeholder="请选择"
                  filterable
                  style="width:100%;"
                >
                <el-option-group label="默认值">
                  <el-option label="无" value="0"></el-option>
                </el-option-group>
                  <el-option-group
                    v-for="group in signCompanyList"
                    :key="group.label"
                    :label="group.label">
                    <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-option-group>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="所属公司">
              <el-select v-model="formInline.compId" @change="compDeplist" :disabled="isAll">
                <el-option label="无" value=""></el-option>
                <el-option v-for="item in compsList" :key="item.compId" :label="item.compName" :value="item.compId"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="所属部门">
              <el-cascader
                  style="width: 100%;"
                  v-model="formInline.deptId"
                  :options="depList"
                  :props="{ expandTrigger: 'hover', checkStrictly: true }"
                  @change="handleChange" filterable clearable></el-cascader>
            </el-form-item>
            <!-- 员工姓名 -->
            <el-form-item label="姓名工号">
              <el-autocomplete
                v-model="formInline.userId"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入姓名"
                @select="handleSelect"
                clearable
              >
                <template slot-scope="{ item }">
                  <div class="selName">
                    <span>{{ item.userName }}</span>
                    <span>[{{ item.userId }}]</span>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
            <el-form-item label="在职状态">
              <el-select v-model="formInline.status" filterable>
                <el-option label="无" value=""></el-option>
                <el-option label="在职" value="0"></el-option>
                <el-option label="离职" value="1"></el-option>
                <el-option label="待入职" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="员工类别">
              <el-select v-model="formInline.type" filterable>
                <el-option label="无" value="0"></el-option>
                <el-option label="正式员工" value="1"></el-option>
                <el-option label="自由顾问" value="2"></el-option>
                <el-option label="实习生" value="3"></el-option>
                <el-option label="外协员工" value="4"></el-option>
                <el-option label="赛特斯主体员工" value="5"></el-option>
                <el-option label="百德劳务" value="6"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内部级别">
              <el-select v-model="formInline.insideLevel" clearable maxlength="15" filterable>
                <el-option label="无" value=""></el-option>
                <el-option label="初级" value="1"></el-option>
                <el-option label="中级" value="2"></el-option>
                <el-option label="高级" value="3"></el-option>
                <el-option label="资深" value="4"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="客户级别单价(含税)">
              <el-input v-model.trim="formInline.userLevel" clearable maxlength="15"></el-input>
            </el-form-item> -->
            <!-- 搜索 -->
            <el-form-item>
              <el-button icon="el-icon-search" @click="selHandle">搜索</el-button>
            </el-form-item>
            <!-- <el-form-item>
              <el-button icon="el-icon-search" @click="reseatHandle">重置</el-button>
            </el-form-item> -->
          </el-form>
        </el-row>
        <!-- 基本操作按钮 是否授权显示-->
        <el-row class="table-btns" v-if="[btnAdd,btnDel,btnUpload,btnDown].indexOf(true) > -1">
          <!-- 添加 -->
          <!-- <el-button
            v-if="btnAdd"
            type="success"
            size="medium"
            icon="el-icon-document-add"
            @click="addHandle"
          >添加</el-button> -->
          <!-- 删除 -->
          <!-- <el-button
            type="danger"
            size="medium"
            icon="el-icon-delete"
            @click="batchRemove"
            v-if="btnDel"
          >删除</el-button> -->
          <!-- 下载 -->
          <el-button type="primary" size="medium" style="float:right;margin-left:10px;" v-if="btnUpload" @click="showFile">
            <i class="fa fa-cloud-upload" aria-hidden="true"></i> 上传
          </el-button>
          <el-button type="success" size="medium" style="float:right;" v-if="btnDown" @click="getConditionAssetExcel">
            <i class="fa fa-cloud-download" aria-hidden="true"></i> 条件导出
          </el-button>
          <!-- <el-button type="success" size="medium" style="float:right;" v-if="btnDown" @click="getHistory">
            <i class="fa fa-cloud-download" aria-hidden="true"></i> 变更历史
          </el-button> -->
          <el-button type="success" size="medium" style="float:right;" v-if="btnDown" @click="getTimeAssetExcel">
            <i class="fa fa-cloud-download" aria-hidden="true"></i> 时间切片导出
          </el-button>
        </el-row>
        <!-- 数据列表 -->
        <el-table
          :data="usersData"
          border
          @selection-change="selsChange"
          style="width: 100%"
          height="520"
          ref="usersData"
        >
          <!-- 序号 -->
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <!-- 员工姓名 -->
          <el-table-column prop="userName" label="员工姓名" width="120"></el-table-column>
          <!-- 员工工号 -->
          <el-table-column prop="userId" label="员工工号" width="120"></el-table-column>
          <!-- 签约主体 -->
          <el-table-column label="签约主体" width="300">
            <!-- 过滤判断 1 上海浩方信息技术有限公司南京分公司  2 上海浩方信息技术有限公司北京分公司 2 上海浩方信息技术有限公司上海分公司 -->
            <template slot-scope="scope">
              <span v-if="scope.row.signCompany === 1">上海浩方信息技术有限公司南京分公司</span>
              <span v-else-if="scope.row.signCompany === 2">上海浩方信息技术有限公司北京分公司</span>
              <span v-else-if="scope.row.signCompany === 3">上海浩方信息技术有限公司</span>
              <span v-else-if="scope.row.signCompany === 4">南京璨错网络科技有限公司</span>
              <span v-else-if="scope.row.signCompany === 5">南京凌睿吉信息技术有限公司</span>
              <span v-else-if="scope.row.signCompany === 6">重庆赛辰科技有限公司</span>
              <span v-else-if="scope.row.signCompany === 7">佰德人力资源集团有限公司</span>
              <span v-else-if="scope.row.signCompany === 8">北京赛特斯信息科技股份有限公司</span>
              <span v-else-if="scope.row.signCompany === 9">赛特斯信息科技股份有限公司</span>
              <span v-else-if="scope.row.signCompany === 10">广东赛特斯信息科技有限公司</span>
              <span v-else-if="scope.row.signCompany === 11">上海赛特斯信息科技股份有限公司</span>
            </template>
          </el-table-column>
          <!-- 一级部门 -->
          <el-table-column sortable :show-overflow-tooltip="true" label="一级部门" width="150">
            <template slot-scope="scope">{{ scope.row.dn1 | fileLv([1, scope.row.level, scope.row.deptName, scope.row.dn2, scope.row.dn1]) }}</template>
          </el-table-column>
          <!-- 二级部门 -->
          <el-table-column sortable :show-overflow-tooltip="true" label="二级部门" width="150">
            <template slot-scope="scope">{{ scope.row.dn2 | fileLv([2, scope.row.level, scope.row.deptName, scope.row.dn2, scope.row.dn1]) }}</template>
          </el-table-column>
          <!-- 三级部门 -->
          <el-table-column sortable :show-overflow-tooltip="true" label="三级部门" width="150">
            <template slot-scope="scope">{{ scope.row.deptName | fileLv([3, scope.row.level, scope.row.deptName, scope.row.dn2, scope.row.dn1]) }}</template>
          </el-table-column>
          <!-- 岗位名称 -->
          <el-table-column :show-overflow-tooltip="true" prop="position" label="岗位名称" width="150"></el-table-column>
          <!-- 员工类别 -->
          <el-table-column label="员工类别" width="150">
            <!-- 过滤判断 1 正式员工  2 自由顾问 2 实习生 -->
            <template slot-scope="scope">
              <span v-if="scope.row.type === 1">正式员工</span>
              <span v-else-if="scope.row.type === 2">自由顾问</span>
              <span v-else-if="scope.row.type === 3">实习生</span>
              <span v-else-if="scope.row.type === 4">外协员工</span>
              <span v-else-if="scope.row.type === 5">赛特斯主体员工</span>
              <span v-else-if="scope.row.type === 6">百德劳务</span>
            </template>
          </el-table-column>
          <!-- 内部级别 -->
          <el-table-column prop="insideLevel" label="内部级别" width="120">
            <!-- 过滤判断 1 初级  2 中级 3 高级 4 资深 -->
            <template slot-scope="scope">
              <span v-if="scope.row.insideLevel === 1">初级</span>
              <span v-else-if="scope.row.insideLevel === 2">中级</span>
              <span v-else-if="scope.row.insideLevel === 3">高级</span>
              <span v-else-if="scope.row.insideLevel === 4">资深</span>
              <span v-else >无</span>
            </template>
          </el-table-column>
          <!-- 在职状态 -->
          <el-table-column label="员工状态" width="150">
            <!-- 过滤判断 0 在职  1 离职 2 待入职 -->
            <template slot-scope="scope">
              <span v-if="scope.row.status === 0">在职</span>
              <span v-else-if="scope.row.status === 1">离职</span>
              <span v-else>待入职</span>
            </template>
          </el-table-column>
          <!-- 归属地 -->
          <el-table-column prop="location" label="归属地" width="120"></el-table-column>
          <!-- 入职时间 -->
          <el-table-column label="入职时间" width="150">
            <template slot-scope="scope">{{ scope.row.joinTime | filterTime }}</template>
          </el-table-column>
          <!-- 参与工作时间 -->
          <el-table-column sortable :show-overflow-tooltip="true" prop="workTime" label="参与工作时间" width="150"></el-table-column>
          <!-- 财务口径 -->
          <el-table-column sortable :show-overflow-tooltip="true" prop="caliber" label="财务口径" width="150">
             <!-- 过滤判断 1 初级  2 中级 3 高级 4 资深 -->
            <template slot-scope="scope">
              <span v-if="scope.row.caliber === '0'">财务部</span>
              <span v-else-if="scope.row.caliber === '1'">商务部</span>
              <span v-else-if="scope.row.caliber === '2'">项目部</span>
              <span v-else-if="scope.row.caliber === '3'">项目管理办公室</span>
              <span v-else-if="scope.row.caliber === '4'">销售部</span>
              <span v-else-if="scope.row.caliber === '5'">研发部</span>
              <span v-if="scope.row.caliber === '6'">综合事务部</span>
            </template>
          </el-table-column>
          <!-- 客户级别单价(含税) -->
          <el-table-column prop="userLevel" label="客户级别" width="120"></el-table-column>
          <!-- 身份证号码 -->
          <el-table-column sortable :show-overflow-tooltip="true" label="身份证号码" width="150">
            <template slot-scope="scope">{{ scope.row.idCard | filterIdCard }}</template>
          </el-table-column>
          <!-- 社保公积金参险地 -->
          <el-table-column sortable :show-overflow-tooltip="true" prop="insured" label="社保公积金参险地" width="180"></el-table-column>
          <!-- 社保基数 -->
          <el-table-column sortable :show-overflow-tooltip="true" prop="insuredBase" label="社保基数" width="150"></el-table-column>
          <!-- 公积金基数 -->
          <el-table-column sortable :show-overflow-tooltip="true" prop="accumBase" label="公积金基数" width="150"></el-table-column>
          <!-- 社保缴纳公司 -->
          <el-table-column sortable :show-overflow-tooltip="true" prop="insuredGs" label="社保缴纳公司" width="150"></el-table-column>
          <!-- 员工性别 -->
          <el-table-column label="员工性别" width="120" prop="sex">
            <!-- 过滤判断  男：1 女：0 -->
            <template slot-scope="scope">{{ scope.row.sex === 0 ? '女' : '男'}}</template>
          </el-table-column>
          <!-- 出生日期 -->
          <el-table-column sortable :show-overflow-tooltip="true" prop="birthday" label="出生日期" width="150"></el-table-column>
          <!-- 邮箱 -->
          <el-table-column sortable :show-overflow-tooltip="true" prop="email" label="邮箱" width="150"></el-table-column>
          <!-- 联系方式 -->
          <el-table-column sortable :show-overflow-tooltip="true" prop="tell" label="联系方式" width="150"></el-table-column>
          <!-- 离职时间 -->
          <el-table-column label="离职时间" width="150">
            <template slot-scope="scope">{{ scope.row.quitTime | filterTime }}</template>
          </el-table-column>

          <!-- 以前的内容------公司 -->
          <!-- <el-table-column sortable :show-overflow-tooltip="true" prop="compName" label="公司" width="150"></el-table-column> -->
          <!-- 部门 -->
          <!-- <el-table-column sortable :show-overflow-tooltip="true" prop="deptName" label="部门" width="150"></el-table-column> -->
          <!-- 备注说明 -->
          <!-- <el-table-column prop="note" label="备注说明" :show-overflow-tooltip="true"></el-table-column> -->
        </el-table>
        <!-- 分页 -->
        <div class="table-pageblock">
          <!-- current-page 当前页数  page-size 每页显示数 total 总页数-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20,50,80,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
      <!-- 弹窗 新增or修改 -->
      <!-- <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
      > -->
      <!-- 添加、修改表单 -->
        <!-- <el-form ref="editForm" :model="editForm" label-width="80px" :rules="editFormRules"> -->
          <!-- 签约主体、 员工类型-->
          <!-- <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="签约主体" prop="signCompany">
                <el-select
                  v-model="editForm.signCompany"
                  auto-complete="off"
                  placeholder="请选择"
                  filterable
                  style="width:100%;"
                > -->
                <!-- <el-option-group label="默认值">
                  <el-option label="无" value="0"></el-option>
                </el-option-group> -->
                  <!-- <el-option-group
                    v-for="group in signCompanyList"
                    :key="group.label"
                    :label="group.label">
                    <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工类型" prop="type">
                <el-select style="width:100%;" v-model="editForm.type" filterable @change="changeType">
                  <el-option label="正式员工" value="1">正式员工</el-option>
                  <el-option label="自由顾问" value="2">自由顾问</el-option>
                  <el-option label="实习生" value="3">实习生</el-option>
                  <el-option label="外协员工" value="4">外协员工</el-option>
                  <el-option label="赛特斯主体员工" value="5">赛特斯主体员工</el-option>
                  <el-option label="百德劳务" value="6">百德劳务</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- 员工姓名、 员工工号-->
          <!-- <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="员工姓名" prop="userName">
                <el-input v-model="editForm.userName" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工工号" prop="userId" v-if="isShowUserCode">
                <el-input v-model="editForm.userId" auto-complete="off" :disabled="isedit" ></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- 入职时间、 部门名称-->
          <!-- <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="入职时间" prop="joinTime">
                <el-date-picker
                  v-model="editForm.joinTime"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门名称" prop="compDept">
                <el-cascader
                  ref="cascaderDept"
                  style="width: 100%;"
                  v-model="editForm.compDept"
                  :options="option"
                  :props="{ expandTrigger: 'hover', checkStrictly: true }"
                  @change="handleChange" filterable></el-cascader>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- 财务口径、 岗位名称-->
          <!-- <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="财务口径" prop="caliber">
                <el-select style="width:100%;" v-model="editForm.caliber" filterable>
                  <el-option label="财务部" value="0">财务部</el-option>
                  <el-option label="商务部" value="1">商务部</el-option>
                  <el-option label="项目部" value="2">项目部</el-option>
                  <el-option label="项目管理办公室" value="3">项目管理办公室</el-option>
                  <el-option label="销售部" value="4">销售部</el-option>
                  <el-option label="研发部" value="5">研发部</el-option>
                  <el-option label="综合事务部" value="6">综合事务部</el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="岗位名称">
                <el-select
                    v-model="editForm.position"
                    auto-complete="off"
                    placeholder="请选择"
                    filterable
                    style="width:100%;"
                  >
                  <el-option-group label="默认值">
                    <el-option label="无" value="0"></el-option>
                  </el-option-group>
                    <el-option-group
                      v-for="group in positionList"
                      :key="group.label"
                      :label="group.label">
                      <el-option
                        v-for="item in group.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-option-group>
                  </el-select>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- 身份证号码、员工性别-->
          <!-- <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="身份证号码" prop="idCard" class="userlevel-box">
                <el-input v-model="editForm.idCard" auto-complete="off" maxlength="18"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="员工性别" prop="sex">
                <el-select style="width:100%;" v-model="editForm.sex">
                  <el-option label="男" value="1">男</el-option>
                  <el-option label="女" value="0">女</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- 出生日期、在职状态-->
          <!-- <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker
                  v-model="editForm.birthday"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-select style="width:100%;" v-model="editForm.status" :disabled="isedit">
                  <el-option label="在职" value="0">在职</el-option>
                  <el-option label="离职" value="1">离职</el-option>
                  <el-option label="待入职" value="2">待入职</el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- 归属地、参与工作时间-->
          <!-- <el-row :gutter="24">
             <el-col :span="12">
              <el-form-item label="归属地" prop="location">
                <el-cascader
                  ref="cascaderLoc"
                  style="width: 100%;"
                  v-model="editForm.location"
                  :options="areaOption"
                  :props="{ expandTrigger: 'hover', checkStrictly: true }"
                  @change="handleChange" filterable></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参与工作时间" prop="workTime" class="userlevel-box">
                <el-date-picker
                  v-model="editForm.workTime"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- 联系方式、客户级别-->
          <!-- <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="联系方式" prop="tell">
                <el-input v-model="editForm.tell" auto-complete="off" maxlength="11"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户级别单价(含税)" prop="userLevel" class="userlevel-box">
                <el-input v-model="editForm.userLevel" auto-complete="off" placeholder="月单价折算人天单价的规则/20.83"></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- 内部级别、社保公积金参险地-->
          <!-- <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="内部级别" prop="insideLevel">
                <el-select style="width:100%;" v-model="editForm.insideLevel" clearable maxlength="15" auto-complete="off" filterable>
                  <el-option label="无" value=""></el-option>
                  <el-option label="初级" value="1"></el-option>
                  <el-option label="中级" value="2"></el-option>
                  <el-option label="高级" value="3"></el-option>
                  <el-option label="资深" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="社保公积金参险地" prop="insured" class="userlevel-box">
                <el-cascader
                  ref="cascader"
                  style="width: 100%;"
                  v-model="editForm.insured"
                  :options="areaOption"
                  :props="{ expandTrigger: 'hover', checkStrictly: true }"
                  @change="handleChange" filterable></el-cascader>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- 社保基数、公积金基数-->
          <!-- <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="社保基数" prop="insuredBase">
                <el-input v-model="editForm.insuredBase" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公积金基数" prop="accumBase" class="userlevel-box">
                <el-input v-model="editForm.accumBase" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- 社保缴纳公司、邮箱-->
          <!-- <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="社保缴纳公司" prop="insuredGs" class="userlevel-box">
                <el-input v-model="editForm.insuredGs" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="editForm.email" auto-complete="off"></el-input>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="离职时间" prop="quitTime">
                <el-date-picker
                  v-model="editForm.quitTime"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%;"
                  :disabled="isedit"
                ></el-date-picker>
              </el-form-item>
            </el-col> -->
          <!-- </el-row>
          <el-row>
            <el-col :span="12"> -->
              <!-- 生效日期 -->
              <!-- <el-form-item label="生效日期" prop="day">
                <el-date-picker
                  v-model="editForm.day"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row> -->
          <!-- 备注说明 -->
          <!-- <el-form-item label="备注说明" prop="note">
            <el-input
              type="textarea"
              placeholder="备注说明（20字以内）"
              maxlength="20"
              v-model="editForm.note"
            ></el-input>
          </el-form-item> -->
        <!-- </el-form>
        <div slot="footer" class="dialog-footer"> -->
          <!-- 取消 关闭弹窗 -->
          <!-- <el-button @click.native="dialogFormVisible=false">取消</el-button> -->
          <!-- 添加 清空表单初始数据 -->
          <!-- <el-button
            v-if="dialogStatus=='create'"
            type="primary"
            @click="createData"
          >添加</el-button> -->
          <!-- 修改获取表单初始数据 -->
          <!-- <el-button v-else type="primary" @click="editData">修改</el-button> -->
        <!-- </div>
      </el-dialog> -->
      <!-- 时间切片弹框 -->
      <el-dialog :title="exportTitle" :visible.sync="timeSliceVisible" width="600px">
        <div class="fileAsset">
          <el-form>
            <el-form-item label="时间范围" prop="logTime">
              <el-date-picker
                v-model="formInline.logTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <p style="width: 320px;line-height:20px;">备注说明：导出规则，根据导出设置的字段与时间范围导出该时间范围内的员工全量数据</p>
        </div>
        <div slot="footer" class="dialog-footer">
          <!-- 确认导出 关闭弹窗 -->
          <el-button type="primary" size="medium" @click="timeSliceAssetExcel">确认</el-button>
          <!-- 确认导出 关闭弹窗 -->
          <!-- <el-button type="primary" size="medium" @click="setUpAssetExcel" v-else>确认</el-button> -->
        </div>
      </el-dialog>
      <!-- 条件导出设置弹框 -->
      <el-dialog title="条件导出设置" :visible.sync="setUpVisible" width="600px">
        <div class="fileAsset">
          <el-form>
            <el-form-item label="">
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="item in setUpChecklist" :label="item.value" :key="item.vlaue" :checked="item.checked">{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <!-- 确认导出 关闭弹窗 -->
          <el-button type="primary" size="medium" @click="exportConditionAssetExcel">确认</el-button>
        </div>
      </el-dialog>
      <!-- 上传弹框 -->
      <el-dialog title="Excel文件上传" :visible.sync="fileVisible" width="600px">
        <div class="fileAsset">
          <el-form>
            <el-form-item label="选择文件">
              <input type="file" name="files" id="file" @change="verificationPicFile"/>
              <el-button type="primary" size="small" @click="fileAssetExcel">确认上传</el-button>
              <a class="down-btn" href="/static/file/user_mb.xlsx" download>模板下载</a>
            </el-form-item>
          </el-form>
          <p>友情提示：</p>
          <p>1、此操作为高风险操作，因此操作导致的数据问题，后果自负；</p>
          <p>2、只能上传xls/xlsx文件，且不超过2M。</p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 引入地区数据
import { province, city } from '../../../static/js/vue-area.js';
import axios from 'axios';
// 引入时间格式化插件
import moment from 'moment';
// 引入公司部门选择徐建
import orgTree from '@/components/OrgTree/index.vue';

// import { _debounce } from '@/public/debounce.js';
import { export2Excel, getName } from '../../public/util';
import { signCompanyConfigList, staffTypeList, insideLevelList, staffStatusList, staffSexList, caliberList } from '../../../static/js/config';
// 引入签约主体数据
const contractList = require('../../../static/json/contracting-entity.json');
// 引入岗位名称数据
const positionList = require('../../../static/json/position-title.json');
export default {
  name: 'users',
  // 注册组件
  components: {
    orgTree
  },

  // 父组件传值子组件
  props: {
    // 按钮级权限
    btns: {
      type: Object
    }
  },

  // 无白屏刷新方法注入
  inject: ['reload'],

  // 监听
  watch: {
    // 按钮权限数据
    btns (val, oldVal) {
      // 刷新当前页
      this.reload();
    }
    // 'editForm.compDept' (val, oldVal) {
    //   if (this.$refs.cascaderDept) {
    //     this.$refs.cascaderDept.dropDownVisible = false;
    //   }
    // },
    // 'editForm.location' (val, oldVal) {
    //   if (this.$refs.cascaderLoc) {
    //     this.$refs.cascaderLoc.dropDownVisible = false;
    //   }
    // },
    // 'editForm.insured' (val, oldVal) {
    //   if (this.$refs.cascader) {
    //     this.$refs.cascader.dropDownVisible = false;
    //   }
    // }
  },

  // 创建实例后执行
  created () {
    // 按钮级授权
    this.authorization(this.$store.state.btns);

    // 获取所有公司
    this.getComp();

    // 获取所有部门
    this.getDept();

    // 获取所有员工
    this.getUsersAll();

    // 加载分页数据
    this.getUsersDataByPage();

    // 获取所有部门信息
    this.getDeptList();

    // 获取所有地区数据
    this.assembleAreaList();

    // 获取签约主体数据
    this.getContractList();

    // 获取岗位名称数据
    this.getPositionList();
  },

  // 过滤器
  filters: {
    // 时间显示过滤
    filterTime (value) {
      return moment(value).format('YYYY-MM-DD') === 'Invalid date' ? '' : moment(value).format('YYYY-MM-DD');
    },
    // 当前部门级别过滤  val 列值  depts [当前列， 当前员工所在部门级别， 3>2>1]
    fileLv (val, depts) {
      // 一级部门列
      if (depts[0] === 1) {
        // 当前所在部门级别
        if (depts[1] === 1) {
          val = depts[2];
        }
        if (depts[1] === 2) {
          val = depts[3];
        }
        if (depts[1] === 3) {
          val = depts[4];
        }
        return val;
      }
      // 二级部门列
      if (depts[0] === 2) {
        // 当前所在部门级别
        if (depts[1] === 1) {
          val = '无';
        }
        if (depts[1] === 2) {
          val = depts[2];
        }
        if (depts[1] === 3) {
          val = depts[3];
        }
        return val;
      }
      // 三级部门列
      if (depts[0] === 3) {
        // 当前所在部门级别
        if (depts[1] === 1) {
          val = '无';
        }
        if (depts[1] === 2) {
          val = '无';
        }
        if (depts[1] === 3) {
          val = depts[2];
        }
        return val;
      }
    },

    // 过滤身份证null值
    filterIdCard (val) {
      if (val === 'null') {
        val = '';
      }
      return val;
    }
  },

  // 当前页面数据
  data () {
    return {
      // 导出Excel表头
      columns: [
        {title: '员工姓名', key: 'userName'},
        {title: '员工工号', key: 'userId'},
        {title: '签约主体', key: 'signCompany'},
        {title: '一级部门', key: 'dn1'},
        {title: '二级部门', key: 'dn2'},
        {title: '三级部门', key: 'deptName'},
        {title: '岗位名称', key: 'position'},
        {title: '员工类别', key: 'type'},
        {title: '内部级别', key: 'insideLevel'},
        {title: '员工状态', key: 'status'},
        {title: '归属地', key: 'location'},
        {title: '入职时间', key: 'joinTime'},
        {title: '参加工作时间', key: 'workTime'},
        {title: '财务口径', key: 'caliber'},
        {title: '客户级别', key: 'userLevel'},
        {title: '身份证号码', key: 'idCard'},
        {title: '社保公积金参险地', key: 'insured'},
        {title: '社保基数', key: 'insuredBase'},
        {title: '公积金基数', key: 'accumBase'},
        {title: '员工性别', key: 'sex'},
        {title: '出生年月', key: 'birthday'},
        {title: '邮箱', key: 'email'},
        {title: '社保缴纳公司', key: 'insuredGs'},
        {title: '联系方式', key: 'tell'},
        {title: '离职时间', key: 'quitTime'}
      ],
      // 导出设置勾选框数据
      setUpChecklist: [
        {value: 'userName', label: '员工姓名', checked: true},
        {value: 'userId', label: '员工工号', checked: true},
        {value: 'signCompany', label: '签约主体', checked: true},
        {value: 'dn1', label: '一级部门', checked: true},
        {value: 'dn2', label: '二级部门', checked: true},
        {value: 'deptName', label: '三级部门', checked: true},
        {value: 'position', label: '岗位名称', checked: true},
        {value: 'type', label: '员工类别', checked: true},
        {value: 'insideLevel', label: '内部级别', checked: true},
        {value: 'status', label: '员工状态', checked: true},
        {value: 'location', label: '归属地', checked: true},
        {value: 'joinTime', label: '入职时间', checked: true},
        {value: 'workTime', label: '参加工作时间', checked: true},
        {value: 'caliber', label: '财务口径', checked: true},
        {value: 'userLevel', label: '客户级别', checked: true},
        {value: 'idCard', label: '身份证号码', checked: true},
        {value: 'insured', label: '社保公积金参险地', checked: true},
        {value: 'insuredBase', label: '社保基数', checked: true},
        {value: 'accumBase', label: '公积金基数', checked: true},
        {value: 'sex', label: '员工性别', checked: true},
        {value: 'birthday', label: '出生年月', checked: true},
        {value: 'email', label: '邮箱', checked: true},
        {value: 'insuredGs', label: '社保缴纳公司', checked: true},
        {value: 'tell', label: '联系方式', checked: true},
        {value: 'quitTime', label: '离职时间', checked: true}
      ],
      // 是否显示员工工号输入框
      isShowUserCode: false,
      // 时间切片弹框显示隐藏
      timeSliceVisible: false,
      // 导出设置弹框显示隐藏
      setUpVisible: false,
      // 显示是时间切片标题还是变更历史标题
      exportTitle: '',
      // 上传弹框显示隐藏
      fileVisible: false,
      // 签约主体数据
      signCompanyList: [],
      // 岗位名称数据
      positionList: [],
      // 公司部门所有数据
      option: [],
      // 归属地所有数据
      areaOption: [],
      isAll: false,
      // 导出设置勾选的数据
      checkList: [],
      // 随机生成的员工id
      randomUserId: '',

      // 按钮显示隐藏  - 默认值
      btnSel: true,
      btnDel: true,
      btnUpload: true,
      btnDown: true,
      btnAdd: true,
      btnEdit: true,

      // 获取所有公司
      compsList: [],

      // 获取所有用户
      usersAll: [],

      // 检索匹配
      restaurants: [],
      state: '',
      timeout: null,

      // 获取所有部门
      compdepts: [],

      // 获取公司部门选择框子组件选中值
      compDept: [],
      // 用户选择框子组件选中值
      getUser: [],

      // 根据所选公司获取对应部门
      depList: [{value: '', label: '无', children: []}],

      // 修改弹窗 - 公司部门子组件默认选中值
      selcpmsVal: [],

      // 搜索条件
      formInline: {
        compId: '',
        deptId: '',
        userId: '',
        status: '',
        type: '0',
        signCompany: '0',
        userLevel: '',
        insideLevel: ''
      },

      // 列表数据
      usersData: [{}],
      // 当前页
      currentPage: 1,
      // 当前数
      pageSize: 20,
      // 总条目数
      total: 20,

      // 弹窗类别
      dialogStatus: '',

      // 工号不允许修改
      isedit: true,

      // 弹窗标题
      textMap: {
        edit: '修改信息',
        create: '添加信息'
      },
      // 弹窗是否显示
      dialogFormVisible: false,

      // 列表选中列
      sels: [],

      // 编辑界面输入框校验规则
      editFormRules: {
        userId: [{ required: true, message: '请输入员工工号', trigger: 'blur' }],
        // password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        userName: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '请选择员工性别', trigger: 'change' }],
        status: [{ required: true, message: '请选择工作状态', trigger: 'change' }],
        location: [{ required: true, message: '请输入归属地', trigger: 'blur' }],
        position: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
        // wechat: [{ required: true, message: '请输入企业微信账号', trigger: 'blur' }],
        joinTime: [{ required: true, message: '请选择入职时间', trigger: 'blur' }],
        type: [{ required: true, message: '请选择员工类别', trigger: 'blur' }],
        signCompany: [{ required: true, message: '请选择签约主体', trigger: 'blur' }],
        userLevel: [{ required: true, message: '请输入客户级别', trigger: 'blur' }],
        // insideLevel: [{ required: true, message: '请输入内部级别', trigger: 'blur' }],
        compDept: [{ required: true, message: '请选择部门名称', trigger: 'blur' }],
        insured: [{ required: true, message: '请选择社保公积金参险地', trigger: 'blur' }],
        idCard: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }],
        birthday: [{ required: true, message: '请选择出生年月', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        tell: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        workTime: [{ required: true, message: '请选择参加工作时间', trigger: 'blur' }]
      },

      // 界面默认数据
      editForm: {
        compDept: [],
        // userId: '',
        password: '', // 密码
        userName: '', // 员工姓名
        sex: '', // 性别
        status: 0, // 在职状态
        location: '', // 归属地
        position: '', // 岗位名称
        wechat: '', // 企业微信账号
        joinTime: '', // 入职时间
        note: '', // 备注说明
        email: '', // 邮箱
        insuredGs: '', // 社保缴纳公司
        tell: '', // 联系方式
        quitTime: '', // 离职时间
        birthday: '', // 出生年月日
        type: '', // 员工类型
        signCompany: '', // 签约主体
        userLevel: '', // 客户级别
        insideLevel: '', // 内部级别
        workTime: '', // 参加工作时间
        caliber: '', // 财务口径
        idCard: '', // 身份证号码
        insured: '', // 社保公积金参险地
        insuredBase: '', // 社保基数
        accumBase: '' // 公积金基数
      },

      // 离职调岗弹出窗

      // 状态
      modalVisible: false,
      // 标题
      changeText: '',
      // 表单
      changeForm: {},

      changeFormRules: {
        day: [{ required: true, message: '请选择生效日期', trigger: 'change' }]
      },
      // 调岗/离职
      isOut: true
    };
  },

  mounted () {
    this.restaurants = this.loadAll();
    // this.getHeight();
    // 增加监听事件，窗口变化时得到高度。
    // window.addEventListener('resize', this.getHeight, false);
  },

  methods: {
    // 表格高度自适应
    // getHeight () {
    // // 获取浏览器高度并计算得到表格所用高度。
    //   this.tableHeight = document.documentElement.clientHeight - 410;
    // },
    // 按钮级授权
    authorization (data) {
      let _this = this;
      for (let i in data) {
        if (data['sel'] === 0) {
          _this.btnSel = false;
        }
        if (data['add'] === 0) {
          _this.btnAdd = false;
        }
        if (data['del'] === 0) {
          _this.btnDel = false;
        }
        if (data['upload'] === 0) {
          _this.btnUpload = false;
        }
        if (data['down'] === 0) {
          _this.btnDown = false;
        }
        if (data['edit'] === 0) {
          _this.btnEdit = false;
        }
        return i;
      }
    },

    // 获取所有公司
    getComp () {
      let _this = this;
      _this.$http.post('api/findAllCompNoPage').then(res => {
        let { code, datas } = res;
        // 判断Code状态
        if (code === 0) {
          for (let i = datas.length; i--;) {
            _this.compsList.push({
              compId: datas[i].compId,
              compName: datas[i].compName
            });
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 获取所有部门
    getDept () {
      let _this = this;
      // 获取部门列表
      _this.$http.post('api/findDeptByCompNoPage').then(res => {
        let { code, datas } = res;
        if (code === 0) {
          _this.compdepts = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 获取所有员工数据
    getUsersAll () {
      let _this = this;
      let params = {
        status: ''
      };
      _this.$http.post('api/findAllBaseUsers', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          for (let i = datas.length; i--;) {
            _this.usersAll.push({
              compName: datas[i].compName,
              deptName: datas[i].deptName,
              userId: datas[i].userId,
              userName: datas[i].userName
            });
          };
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 加载全部员工数据
    loadAll () {
      return this.usersAll;
    },

    // 自动检索匹配
    querySearchAsync (queryString, cb) {
      let _this = this;
      let restaurants = _this.restaurants;
      let results = queryString ? restaurants.filter(_this.createStateFilter(queryString)) : restaurants;
      clearTimeout(_this.timeout);
      _this.timeout = setTimeout(() => {
        cb(results);
      }, 300 * Math.random());
    },

    // 查询
    createStateFilter (queryString) {
      return (state) => {
        return (state.userName.indexOf(queryString) === 0);
      };
    },

    // 选中赋值
    handleSelect (item) {
      this.formInline.userId = item.userId;
    },

    // 查询
    selHandle: function () {
      let _this = this;
      // 收集请求数据
      let params = {
        userId: _this.formInline.userId,
        deptId: _this.formInline.deptId === null ? '' : _this.formInline.deptId.length ? _this.formInline.deptId[_this.formInline.deptId.length - 1].split('-')[0] : '',
        compId: _this.formInline.compId,
        status: _this.formInline.status,
        type: _this.formInline.type,
        signCompany: _this.formInline.signCompany,
        userLevel: _this.formInline.userLevel,
        insideLevel: _this.formInline.insideLevel,
        pageNum: _this.currentPage,
        pageSize: _this.pageSize
      };
      // 根据员工ID 部门ID 公司ID查询分页数据
      _this.$http.raw('api/findAllUser', params).then(res => {
        let { code, datas } = res;
        // 判断Code状态
        if (code === 0) {
          // 总页数
          _this.total = datas.total;
          // 数据结果集
          _this.usersData = datas.list;
          // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
          if (!datas.list.length && _this.currentPage !== 1) {
            // 当前页减一
            _this.currentPage -= 1;
            // 调用自己
            _this.getUsersDataByPage();
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 重置搜索
    reseatHandle () {
      let _this = this;
      _this.formInline = {
        userId: '',
        deptId: '',
        compId: '',
        status: '',
        type: '0',
        signCompany: '0',
        userLevel: '',
        insideLevel: ''
      };
      // 收集请求数据
      let params = {
        userId: '',
        deptId: '',
        compId: '',
        status: '',
        type: '0',
        signCompany: '0',
        userLevel: '',
        insideLevel: '',
        pageNum: _this.currentPage,
        pageSize: _this.pageSize
      };
      // 根据员工ID 部门ID 公司ID查询分页数据
      _this.$http.raw('api/findAllUser', params).then(res => {
        let { code, datas } = res;
        // 判断Code状态
        if (code === 0) {
          // 总页数
          _this.total = datas.total;
          // 数据结果集
          _this.usersData = datas.list;
          // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
          if (!datas.list.length && _this.currentPage !== 1) {
            // 当前页减一
            _this.currentPage -= 1;
            // 调用自己
            _this.getUsersDataByPage();
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 显示新增界面
    // addHandle: function () {
    //   let _this = this;
    //   // 允许添加工号
    //   _this.isedit = false;
    //   // 弹窗类型
    //   _this.dialogStatus = 'create';
    //   // 弹窗显示状态
    //   _this.dialogFormVisible = true;
    //   _this.compDept = '';
    //   // 初始化弹窗表单 公司部门选择框子组件选中数据
    //   _this.selcpmsVal = [];
    //   // 初始化新增界面默认数据
    //   _this.editForm = {
    //     compDept: '',
    //     // userId: '',
    //     password: '',
    //     userName: '',
    //     sex: '',
    //     status: '0',
    //     location: '',
    //     position: '',
    //     wechat: '',
    //     joinTime: '',
    //     note: '',
    //     email: '',
    //     insuredGs: '',
    //     tell: '',
    //     quitTime: '',
    //     birthday: '',
    //     type: '', // 员工类型
    //     signCompany: '', // 签约主体
    //     userLevel: '', // 客户级别
    //     insideLevel: '', // 内部级别
    //     workTime: '', // 参加工作时间
    //     caliber: '', // 财务口径
    //     idCard: '', // 身份证号码
    //     insured: '', // 社保公积金参险地
    //     insuredBase: '', // 社保基数
    //     accumBase: '' // 公积金基数
    //   };
    // },

    // 获取公司部门选择框选中值
    // getCompDept (data) {
    //   let _this = this;
    //   if (_this.isOut) {
    //     _this.compDept = data;
    //     _this.changeForm.compDept = data;
    //     _this.changeForm.location = data[1];
    //   }
    //   _this.editForm.compDept = data;
    //   _this.editForm.location = data[1];
    // },

    // 添加
    // createData: _debounce(function () {
    //   let _this = this;
    //   _this.$nextTick(() => {
    //     // 判断是否通过验证规则验证
    //     _this.$refs['editForm'].validate(valid => {
    //       if (valid) {
    //         // 收集请求参数
    //         let params = {
    //           userName: _this.editForm.userName === null ? '' : _this.editForm.userName,
    //           userId: _this.editForm.userId ? _this.editForm.userId : '1',
    //           // 密码Md5转换
    //           password: _this.$md5('123456'),
    //           sex: _this.editForm.sex === null ? '' : _this.editForm.sex,
    //           status: _this.editForm.status === null ? '' : _this.editForm.status,
    //           type: _this.editForm.type === null ? '' : _this.editForm.type,
    //           signCompany: _this.editForm.signCompany === null ? '' : _this.editForm.signCompany,
    //           userLevel: _this.editForm.userLevel === null ? '' : _this.editForm.userLevel,
    //           insideLevel: _this.editForm.insideLevel === null ? '' : _this.editForm.insideLevel,
    //           birthday: _this.editForm.birthday === null ? '' : moment(_this.editForm.birthday).format('YYYY-MM-DD'),
    //           email: _this.editForm.email === null ? '' : _this.editForm.email,
    //           insuredGs: _this.editForm.insuredGs === null ? '' : _this.editForm.insuredGs,
    //           wechat: '',
    //           tell: _this.editForm.tell === null ? '' : _this.editForm.tell,
    //           location: _this.editForm.location[0] + _this.editForm.location[1],
    //           position: _this.editForm.position === null ? '' : _this.editForm.position,
    //           joinTime: _this.editForm.joinTime === null ? '' : moment(_this.editForm.joinTime).format('YYYY-MM-DD'),
    //           // quitTime: _this.editForm.quitTime === null ? '' : moment(_this.editForm.quitTime).format('YYYY-MM-DD'),
    //           mark: 1,
    //           createUserId: _this.$store.state.userinfo.userId,
    //           createTime: new Date(),
    //           updateUserId: _this.$store.state.userinfo.userId,
    //           updateTime: new Date(),
    //           deptIds: [{
    //             compId: 'HFXX',
    //             deptId: _this.editForm.compDept.length ? _this.editForm.compDept[_this.editForm.compDept.length - 1].split('-')[0] : ''
    //           }],
    //           note: JSON.stringify([_this.editForm.compDept, _this.editForm.location, _this.editForm.insured]),
    //           workTime: _this.editForm.workTime === null ? '' : moment(_this.editForm.workTime).format('YYYY-MM-DD'),
    //           caliber: _this.editForm.caliber === null ? '' : _this.editForm.caliber,
    //           idCard: _this.editForm.idCard === null ? '' : _this.editForm.idCard,
    //           insured: _this.editForm.insured[0] + _this.editForm.insured[1],
    //           insuredBase: _this.editForm.insuredBase === null ? '' : _this.editForm.insuredBase,
    //           accumBase: _this.editForm.accumBase === null ? '' : _this.editForm.accumBase
    //         };
    //         // 获取选择用户工号
    //         // let getUser = {
    //         //   userId: _this.editForm.userId
    //         // };
    //         // 添加用户
    //         _this.$http.raw('api/insertUser', params).then(res => {
    //           let { code } = res;
    //           // 判断Code状态
    //           if (code === 0) {
    //             _this.$message({
    //               message: '添加成功！',
    //               type: 'success'
    //             });
    //             _this.$refs['editForm'].resetFields();
    //             _this.dialogFormVisible = false;
    //             // 刷新列表
    //             _this.getUsersDataByPage();
    //             // 获取所有员工
    //             _this.getUsersAll();
    //           }
    //         }).catch(err => {
    //           if (err === undefined) {
    //             _this.$message({
    //               message: '服务器响应异常！',
    //               type: 'error'
    //             });
    //             return false;
    //           }
    //         });
    //         // 通过用户工号判断是否被占用
    //         // _this.$http.post('api/checkUserByUserId', getUser).then(res => {
    //         //   let { code, datas } = res;
    //         //   // 判断Code状态
    //         //   if (code === 0) {
    //         //     if (datas) {
    //         //       _this.$message({
    //         //         message: '工号被占用！',
    //         //         type: 'error'
    //         //       });
    //         //     } else {
    //         //     }
    //         //   }
    //         // }).catch(err => {
    //         //   if (err === undefined) {
    //         //     _this.$message({
    //         //       message: '服务器响应异常！',
    //         //       type: 'error'
    //         //     });
    //         //     return false;
    //         //   }
    //         // });
    //       }
    //     });
    //   });
    // }, 200),

    // 全选、单选、多选
    selsChange: function (sels) {
      this.sels = sels;
    },

    // 刷新页面数据
    getUsersDataByPage () {
      let _this = this;
      // 收集请求参数
      let params = {
        userId: _this.formInline.userId === null ? '' : _this.formInline.userId,
        deptId: _this.formInline.deptId === null ? '' : _this.formInline.deptId.length ? _this.formInline.deptId[_this.formInline.deptId.length - 1].split('-')[0] : '',
        compId: _this.formInline.compId === null ? '' : _this.formInline.compId,
        status: _this.formInline.status === null ? '0' : _this.formInline.status,
        type: _this.formInline.type === null ? '0' : _this.formInline.type,
        signCompany: _this.formInline.signCompany === null ? '0' : _this.formInline.signCompany,
        userLevel: _this.formInline.userLevel === null ? '' : _this.formInline.userLevel,
        insideLevel: _this.formInline.insideLevel === null ? '' : _this.formInline.insideLevel,
        pageNum: _this.currentPage,
        pageSize: _this.pageSize
      };

      // 获取分页数据
      _this.$http.raw('api/findAllUser', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          // 总页数
          _this.total = datas.total;
          // 数据结果集
          _this.usersData = datas.list;
          // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
          if (!datas.list.length && _this.currentPage !== 1) {
            // 当前页减一
            _this.currentPage -= 1;
            // 调用自己
            _this.getUsersDataByPage();
          }
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 每页显示的条数改变
    handleSizeChange (val) {
      this.pageSize = val;
      // 调用刷新页面
      this.getUsersDataByPage();
    },
    // 当前页码
    handleCurrentChange (val) {
      this.currentPage = val;
      // 调用
      this.getUsersDataByPage();
    },
    // 下载
    // getAssetExcel (params, flag) {
    //   let _this = this;
    //   // let user = _this.formInline.user === null || _this.formInline.user === undefined ? '' : _this.formInline.user;
    //   let baseParams = params.userId + '&deptId=' + params.deptId + '&compId=' + params.compId + '&status=' + params.status + '&type=' + params.type + '&signCompany=' + params.signCompany + '&userLevel=' + params.userLevel + '&insideLevel=' + params.insideLevel;
    //   let paramsList = flag === 1 ? (baseParams + '&beginTime=' + params.beginTime + '&endTime=' + params.endTime) : baseParams;
    //   // 根据查询下载数据
    //   _this.$http.download('api/downUsers?userId' + paramsList).then(res => {
    //     let blob = new Blob([res], {type: res.type});
    //     let downloadElement = document.createElement('a');
    //     let href = window.URL.createObjectURL(blob); // 创建下载的链接
    //     downloadElement.href = href;
    //     downloadElement.download = '员工列表.xlsx'; // 下载后文件名
    //     document.body.appendChild(downloadElement);
    //     downloadElement.click(); // 点击下载
    //     document.body.removeChild(downloadElement); // 下载完成移除元素
    //     window.URL.revokeObjectURL(href); // 释放blob对象
    //   }).catch(err => {
    //     if (err === undefined) {
    //       _this.$message({
    //         message: '服务器响应异常！',
    //         type: 'error'
    //       });
    //       return false;
    //     }
    //   });
    // },

    // 获取对应部门ID的部门信息
    getDeptList () {
      let _this = this;
      let params = {
        compId: 'HFXX'
      };
      _this.$http.post('api/findDeptByCompNoPage', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          let options = [];
          let secondOpt = [];
          let thirdOpt = [];
          datas.map(item => {
            if (item.level === 1) {
              options.push({
                value: item.deptId + '-' + item.deptName,
                label: item.deptName,
                id: item.deptId,
                children: []
              });
            };
            if (item.level === 2) {
              secondOpt.push({
                value: item.deptId + '-' + item.deptName,
                label: item.deptName,
                parentId: item.parentId,
                id: item.deptId,
                children: []
              });
            }
            if (item.level === 3) {
              thirdOpt.push({
                value: item.deptId + '-' + item.deptName,
                label: item.deptName,
                parentId: item.parentId
              });
            }
          });
          thirdOpt.forEach((item, index) => {
            secondOpt.forEach((ite, idx) => {
              if (item.parentId === ite.id) {
                ite.children.push(item);
              }
            });
          });
          secondOpt.forEach((item, index) => {
            options.forEach((ite, idx) => {
              if (item.parentId === ite.id) {
                ite.children.push(item);
              }
            });
          });
          _this.option = options;
          _this.depList = _this.depList.concat(options);
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 组装地区数据
    assembleAreaList () {
      let _this = this;
      let provinceOpt = [];
      let cityOpt = [];
      province.map(item => {
        provinceOpt.push({
          value: item.name,
          label: item.name,
          parentId: item.parentId,
          id: item.code,
          children: []
        });
      });
      city.map(item => {
        cityOpt.push({
          value: item.name,
          label: item.name,
          parentId: item.parentId
        });
      });
      cityOpt.forEach((item, index) => {
        provinceOpt.forEach((ite, idx) => {
          if (item.parentId === ite.id) {
            ite.children.push(item);
          }
        });
      });
      _this.areaOption = provinceOpt;
    },

    // 获取签约主体数据
    getContractList () {
      let _this = this;
      _this.signCompanyList = contractList.data;
    },

    // 获取岗位名称数据
    getPositionList () {
      let _this = this;
      _this.positionList = positionList.data;
    },
    // 员工信息上传
    showFile () {
      let _this = this;
      _this.fileVisible = true;
      _this.$nextTick(() => {
        document.getElementById('file').value = '';
      });
    },
    // 文件判断
    verificationPicFile () {
      let _this = this;
      let file = document.querySelector('input[type=file]').files[0];
      let fileTypes = ['.xls', '.xlsx'];
      let fileMaxSize = 2048;// 2M
      let isNext = false;

      let fileName = file.name;
      let fileSize = file.size;
      _this.isNewFileName = true;

      if (_this.isNewFileName) {
        _this.$nextTick(() => {
          _this.percentage = 0;
          _this.status = '';
          _this.percentageName = '';
          _this.uploadCode = '';
        });
      }

      if (fileName) {
        let fileEnd = fileName.substring(fileName.indexOf('.'));
        for (let i = fileTypes.length; i--;) {
          if (fileTypes[i] === fileEnd) {
            isNext = true;
            break;
          }
        }
        if (!isNext) {
          _this.$message({
            message: '不接受此文件类型！',
            type: 'error'
          });
          document.querySelector('input[type=file]').value = '';
          return false;
        }
      }
      if (fileName) {
        let size = fileSize / 2048;
        if (size > fileMaxSize) {
          _this.$message({
            message: '文件大小不能大于2M！',
            type: 'error'
          });
          document.querySelector('input[type=file]').value = '';
          return false;
        } else if (size <= 0) {
          _this.$message({
            message: '文件大小不能为0M！',
            type: 'error'
          });
          document.querySelector('input[type=file]').value = '';
          return false;
        }
      }
    },

    // 文件上传
    fileAssetExcel () {
      let _this = this;
      let file = document.querySelector('input[type=file]').files[0];
      if (file === null || file === undefined || file === '') {
        _this.$message({
          message: '未选择任何文件！',
          type: 'error'
        });
      } else {
        let formData = new FormData(); // 创建form对象
        formData.append('uploadFile', file);
        axios({
          url: 'api/uploadUsers',
          method: 'POST',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          if (res.status === 200) {
            if (res.data.code === 0) {
              _this.fileVisible = false;
              // 刷新数据
              _this.getUsersDataByPage();
            } else {
              _this.$message({
                message: '上传失败！',
                type: 'error'
              });
            }
          }
        }).catch(err => {
          if (err === undefined) {
            _this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
        // _this.$http.upload('api/uploadUsers', formData).then(res => {
        //   if (res.code === 0) {
        //     _this.fileVisible = false;
        //     // 刷新数据
        //     _this.getUsersDataByPage();
        //   }
        // })
      }
    },

    // 打开时间切片弹框
    getTimeAssetExcel () {
      let _this = this;
      _this.timeSliceVisible = true;
      _this.exportTitle = '时间切片导出';
    },

    // 时间切片导出数据收集
    timeSliceAssetExcel () {
      let _this = this;
      // 收集请求信息
      let params = {
        beginTime: _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[0]).format('YYYY-MM-DD') : '',
        endTime: _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[1]).format('YYYY-MM-DD') : ''
      };
      // 根据查询下载数据
      _this.$http.raw('api/findUserHis', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          // 下载数据集合
          let resulis = [];
          // 符合时间范围内地员工
          let newUserList = datas.userList.filter(item => {
            if (item.joinTime && new Date(item.joinTime).getTime() <= new Date(params.endTime).getTime()) return item;
          });
          // 匹配变更记录筛选替换具体员工信息
          newUserList.map(ind => {
            datas.hisUserList.map(his => {
              if (ind.userId === his.userId) {
                // 过滤旧数据  符合条件使用当前数据集合  不符合 采用循环的原始值
                let olddb = his.note;
                let oldUserList = olddb.indexOf('oldInfo') > -1 ? JSON.parse(olddb).oldInfo : ind;
                let newUserInfo = olddb.indexOf('oldInfo') > -1 ? JSON.parse(olddb).newInfo : ind;
                // 生效时间大于时间切片的结束时间，切片时间在生效时间前，返回旧数据，否则返回新数据
                let isNewTime = new Date(his.date).getTime() >= new Date(params.endTime).getTime();
                // 调岗部门替换
                // if (ind.type === 1) {
                //   ind.dn1 = oldUserList.dn1;
                //   ind.dn2 = oldUserList.dn2;
                //   ind.deptName = oldUserList.deptName;
                // }
                // // 离职状态替换
                // if (ind.type === 2) {
                //   ind.status = '离职';
                // }
                // // 变更信息替换
                // if (ind.type === 4) {
                // ind.compName = oldUserList.compName; // 公司名称
                ind.userName = isNewTime ? oldUserList.userName : newUserInfo.userName; // 员工姓名
                ind.userId = isNewTime ? oldUserList.userId : newUserInfo.userId; // 员工工号
                ind.signCompany = isNewTime ? oldUserList.signCompany : Number(newUserInfo.signCompany); // 签约主体
                ind.dn1 = isNewTime ? oldUserList.dn1 : newUserInfo.dn1;
                ind.dn2 = isNewTime ? oldUserList.dn2 : newUserInfo.dn2;
                ind.deptName = isNewTime ? oldUserList.deptName : newUserInfo.deptName; // 公司部门
                ind.position = isNewTime ? oldUserList.position : newUserInfo.position; // 岗位名称
                ind.type = isNewTime ? oldUserList.type : Number(newUserInfo.type); // 员工类型
                ind.insideLevel = isNewTime ? oldUserList.insideLevel : Number(newUserInfo.insideLevel); // 内部级别
                ind.status = isNewTime ? oldUserList.status : newUserInfo.status; // 员工状态
                ind.location = isNewTime ? oldUserList.location : newUserInfo.location; // 归属地
                ind.joinTime = isNewTime ? oldUserList.joinTime : newUserInfo.joinTime; // 入职时间
                ind.workTime = isNewTime ? oldUserList.workTime : newUserInfo.workTime; // 参加工作时间
                ind.caliber = isNewTime ? oldUserList.caliber : Number(newUserInfo.caliber); // 财务口径
                ind.userLevel = isNewTime ? oldUserList.userLevel : newUserInfo.userLevel; // 客户级别
                ind.idCard = isNewTime ? oldUserList.idCard : newUserInfo.idCard; // 身份证号码
                ind.insured = isNewTime ? oldUserList.insured : newUserInfo.insured; // 社保公积金参险地
                ind.insuredBase = isNewTime ? oldUserList.insuredBase : newUserInfo.insuredBase; // 社保基数
                ind.accumBase = isNewTime ? oldUserList.accumBase : newUserInfo.accumBase; // 公积金基数
                ind.sex = isNewTime ? oldUserList.sex : Number(newUserInfo.sex); // 性别
                ind.birthday = isNewTime ? oldUserList.birthday : newUserInfo.birthday; // 出生年月日
                ind.email = isNewTime ? oldUserList.email : newUserInfo.email; // 邮箱
                ind.insuredGs = isNewTime ? oldUserList.insuredGs : newUserInfo.insuredGs; // 社保缴纳公司
                ind.tell = isNewTime ? oldUserList.tell : newUserInfo.tell; // 联系方式
                // ite.wechat = oldUserList.wechat; // 企业微信账号
                // ite.note = oldUserList.note; // 备注说明
                // ite.quitTime = oldUserList.quitTime; // 离职时间
                // }
              }
            });
            ind.signCompany = getName(signCompanyConfigList, ind.signCompany); // 签约主体
            ind.insideLevel = ind.insideLevel ? getName(insideLevelList, ind.insideLevel) : '无'; // 内部级别
            ind.sex = getName(staffSexList, ind.sex); // 性别
            ind.type = getName(staffTypeList, ind.type); // 员工类型
            ind.status = getName(staffStatusList, ind.status); // 员工状态
            ind.caliber = getName(caliberList, ind.caliber); // 财务口径
            ind.dn1 = ind.dn1 ? ind.dn1 : (ind.dn2 ? ind.dn2 : ind.deptName);
            ind.dn2 = ind.dn2 ? (ind.dn1 === ind.dn2 ? ind.deptName : ind.dn2) : '无';
            ind.deptName = ind.dn2 === '无' ? '无' : ind.deptName;
            resulis.push(ind);
          });
          _this.timeSliceVisible = false;
          _this.formInline.logTime = [];
          _this.exportData('员工信息时间切片列表', _this.columns, resulis);
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 时间切片导出表格的方法
    exportData (listTitle, newColumns, userList) {
      export2Excel(listTitle, newColumns, userList);
    },

    // 导出设置弹框打开
    // getHistory () {
    //   let _this = this;
    //   _this.timeSliceVisible = true;
    //   _this.exportTitle = '变更历史导出';
    // },

    // 导出设置数据收集
    // setUpAssetExcel () {
    //   let _this = this;
    //   let beginTime = _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[0]).format('YYYY-MM-DD') : '';
    //   let endTime = _this.formInline.logTime && _this.formInline.logTime.length > 0 ? moment(_this.formInline.logTime[1]).format('YYYY-MM-DD') : '';
    //   // 根据查询下载数据
    //   _this.$http.download('api/downUserHistry?beginTime=' + beginTime + '&endTime=' + endTime).then(res => {
    //     let blob = new Blob([res], {type: res.type});
    //     let downloadElement = document.createElement('a');
    //     let href = window.URL.createObjectURL(blob); // 创建下载的链接
    //     downloadElement.href = href;
    //     downloadElement.download = '员工列表.xlsx'; // 下载后文件名
    //     document.body.appendChild(downloadElement);
    //     downloadElement.click(); // 点击下载
    //     document.body.removeChild(downloadElement); // 下载完成移除元素
    //     window.URL.revokeObjectURL(href); // 释放blob对象
    //     _this.formInline.logTime = [];
    //     _this.timeSliceVisible = false;
    //   }).catch(err => {
    //     if (err === undefined) {
    //       _this.$message({
    //         message: '服务器响应异常！',
    //         type: 'error'
    //       });
    //       return false;
    //     }
    //   });
    // },

    // 切换员工类型显示隐藏员工工号
    // changeType (val) {
    //   let _this = this;
    //   if (val === '5') {
    //     _this.isShowUserCode = true;
    //   } else {
    //     _this.isShowUserCode = false;
    //   }
    // },
    // 条件导出弹框打开
    getConditionAssetExcel () {
      let _this = this;
      _this.setUpVisible = true;
    },
    // 按条件导出
    exportConditionAssetExcel () {
      let _this = this;
      // 收集请求信息
      let params = {
        userId: _this.formInline.userId,
        deptId: _this.formInline.deptId === null ? '' : _this.formInline.deptId.length ? _this.formInline.deptId[_this.formInline.deptId.length - 1].split('-')[0] : '',
        compId: _this.formInline.compId,
        status: _this.formInline.status,
        type: _this.formInline.type,
        signCompany: _this.formInline.signCompany,
        userLevel: _this.formInline.userLevel,
        insideLevel: _this.formInline.insideLevel
      };
      // 根据员工ID 部门ID 公司ID查询分页数据
      _this.$http.raw('api/findAllUserNoPage', params).then(res => {
        let { code, datas } = res;
        // 判断Code状态
        if (code === 0) {
          datas.map(item => {
            item.signCompany = item.signCompany ? getName(signCompanyConfigList, item.signCompany) : ''; // 签约主体
            item.insideLevel = item.insideLevel ? getName(insideLevelList, item.insideLevel) : ''; // 内部级别
            item.sex = item.sex ? getName(staffSexList, item.sex) : ''; // 性别
            item.type = item.type ? getName(staffTypeList, item.type) : ''; // 员工类型
            item.status = item.status ? getName(staffStatusList, item.status) : ''; // 员工状态
            item.dn1 = item.dn1 === '无' ? (item.dn2 === '无' ? item.deptName : item.dn2) : item.dn1;
            item.dn2 = item.dn1 === item.dn2 ? item.deptName : item.dn2;
            item.deptName = item.dn2 === item.deptName || item.dn2 === '无' ? '无' : item.deptName;
          });
          // 将选择的表头过滤成新的表头
          let newUserColumns = [];
          _this.columns.map(ites => {
            _this.checkList.map(ite => {
              if (ites.key === ite) {
                newUserColumns.push(ites);
              }
            });
          });
          _this.setUpVisible = false;
          _this.checkList = [ 'userName', 'userId', 'signCompany', 'dn1', 'dn2',
            'deptName', 'position', 'type', 'insideLevel', 'status', 'location',
            'joinTime', 'workTime', 'caliber', 'userLevel', 'idCard', 'insured',
            'insuredBase', 'accumBase', 'sex', 'birthday', 'email', 'insuredGs', 'tell', 'quitTime'];
          _this.exportData('条件导出员工列表', newUserColumns, datas);
        }
      }).catch(err => {
        if (err === undefined) {
          _this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    }
  }
};
</script>

<style lang='scss' scoped>
@import './index.scss';
</style>
<style lang="scss">
  .userlevel-box {
    .el-form-item__label {
      line-height: 20px;
    }
  }
</style>
